<template>
	<view class="metting-card-info">
		<view class="title f-side " :class="showMore?'':'showMore'">
			<view class="title-left flex">
				<image src="../../static/l1.png" mode=""></image>
				<view>{{orderData.VehiclePlateNo}}</view>
				<!-- <view class="new-customer" v-if="false">新客</view> -->
			</view>
			
			<view class="flex f-side" style="width: 300upx;">
				<view class="flex">
					<navigator :url="myUrl" class="flex navigator" style="color:#54AEFD">车辆信息 <view style="color:#54AEFD" class="iconfont icon-you"> </view></navigator>
				</view>

				<view class="height-fixed f-center show-more"   @tap="do_showMore"> {{showMore?'收起':'展开'}} <view class="iconfont icon-down-trangle" :class="showMore?'icon-up2':'icon-down-trangle'"></view> </view>
			</view>
		</view>
		<view class="showMore1" :class="showMore?'showMore2':'showMore1'">
				<view class="list f-side" ><view style="color: #9B9B9B;">车型：</view><view>{{orderData.VehicleType||''}}</view></view>
				<view class="list flex">
					<view class="f-side " style="flex: 0 0 45%;"><view style="flex:0 0 120upx">里程：</view><view class="add-input flex"> <input placeholder="必填" @blur="do_changeData(orderData)" type="text" v-model="orderData.Mil" class="flex1" ><view style="margin-left: 10upx;" v-if="orderData.Mil">KM</view></view></view>
					<view class="f-side flex1"><view style="margin-left: 40upx;">保险日期：</view>
						<view>
<!-- 							<picker class="input" mode="date"  @change="getPiker($event)" :value="vCarInfo.VehicleRegistryDate">
								<view class="picker-text flex zcJustifyC_end">{{orderData.VehicleRegistryDate||''}} </view>
							</picker> -->
						{{orderData.PlanInsurDate||''}}
						</view>
					</view>
				</view>
				<view class="list flex">
					<view class="f-side " style="flex: 0 0 45%;"><view style="flex:0 0 120upx">联系人：</view><view class="add-input "><input placeholder="必填" @blur="do_changeData(orderData)" type="text" v-model="orderData.VehicleContact"></view></view>
					<view class="f-side flex1"><view style="flex:0 0 150upx;margin-left: 40upx;">联系电话：</view><view class="add-input "><input placeholder="必填" maxlength="11" @blur="do_changeData(orderData)" type="text" v-model="orderData.VehicleContactMobile"></view></view>
					
				</view>
				<view class="f-side flex1 list" style="padding-bottom: 10upx;"><view style="flex:0 0 150upx;color: #9B9B9B;">检查说明：</view><view class="add-input ">{{orderData.CheckInfo||""}}</view></view>
				<view class="list f-side" style="border: none;">
					<view style="color: #9B9B9B;">近期线索：</view>
					<view class="flex upkeep-clue">
							<block v-for="(item2,index2) in orderData.itemNoticeList" :key="index2" >
								<view :style="{border:'1rpx solid #'+item2.Color,color:'#'+item2.Color}" class="zcOverflow3" @tap="do_showDetail(item2)">{{item2.Name}}</view>
							</block>
					</view>
				</view>
			
		</view>

	</view>
</template>

<script>
	let _this;
	export default{
		data(){
			return{
				showMore:true
			}
		},
		props:{
			orderData:Object,
			VehicleInfoSN:String
		},
		computed: {
			myUrl() {
				return '../../pages/home_car_archives/home_car_archives?SN='+_this.VehicleInfoSN 
			}
		},
		created(){
			_this = this;
		},
		mounted(){
			// console.log(889);
			console.log(this.orderData);
		},
		methods:{
			// getPiker(e){
			// 	_this.orderData.VehicleRegistryDate = e.detail.value;
			// 	_this.do_changeData(_this.orderData)
			// 	// _this.$emit('do_changedate',e.detail.value)
			// },
			do_showMore(index){
				let _scrollTop ;
				if(!_this.showMore){
					// _scrollTop = _this.scrollTop
				}else{
					uni.pageScrollTo({
						scrollTop:0
					})
				}
					_this.showMore = !_this.showMore;
					_this.$emit('do_showMore',_this.showMore)
			},
			do_showDetail(item){
				this.$emit("do_showDetail",item)
			},
			do_changeData(item){
				this.$emit('do_changeData',item)
			}
		}
	}
</script>

<style>
	.metting-card-info{
			padding:0upx 20upx 5upx 20upx;
			background: #fff;
			box-shadow: 1upx 1upx 5upx 4upx #EAEDF1;
		}
		.title{
			height: 80upx;
			line-height: 80upx;
			border-bottom: 2upx solid #e5e5e5;
			background: #fff;
		}
	.title-left image{
		width: 45upx;
		height: 45upx;
		margin-right: 15upx;
		position: relative;
		top:6upx;
	}
	.title-left>view:nth-of-type(1){
		font-weight: 500;
		font-size: 32upx;
	}
	.list>view>view:nth-of-type(1){
		color: #9B9B9B;
	}
	.upkeep-clue>view{
		padding: 3upx 10upx 4upx 15upx;
		height: 40upx;
		line-height: 35upx;
		margin-right: 20upx;
		color: #fff;
		border-radius: 10upx;
		max-width: 170upx !important;
		box-sizing: border-box;
		font-size: 21upx;

	}
	.navigator{
		color:#8F8F8F;
	}
	.icon-you{
		color:#8F8F8F;
		font-size: 24upx;
		margin-left: 5upx;
		padding-top: 4upx;
	}
	.add-input {
		/* margin-left: 30upx; */
		text-align: right;
	}
	.list{
		border-bottom: 1upx solid #e5e5e5;
		line-height: 70upx;
		height: 70upx;
	}
	
	.icon-down-trangle,.icon-up2{
		margin-left: 20upx;
		flex: 0 0 0;
	}
		.showMore1{
		max-height: 0upx;
		overflow: hidden;
		transition: max-height .5s ease;
		
	}
	.showMore2{
		max-height:640upx;
	}
	.showMore{
		border: none !important;
	}
</style>
